import React, { useState, useEffect, useContext } from 'react';
import './style.scss';
import { useNavigate } from "react-router-dom";
import { useStore, useDispatch, useSelector, shallowEqual } from 'react-redux';
import { Calendar, CarouselTxt, Notice, BackTop } from 'zys-ui-react';


export default () => {
    const store = useStore();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    // const testNum = useSelector(state => state.testNum, shallowEqual);
    const [state, setState] = useState(store.getState());
    const [showCalendar, handleCalendar] = useState(false);
    const [dateStr, handleDateStr] = useState('');


    let toPage = (page) => {
        navigate(page)
    }

    const add = () => {
        // console.log('add')
        state.testNum = state.testNum + 1;
        setState({ ...state });
        dispatch({
            type: "ADD_NUM",
            value: state.testNum,
        })
        // store.dispatch({
        //     type: "ADD_NUM",
        //     value: state.testNum + 1,
        // });
    }


    const reduce = () => {
        state.testNum = state.testNum - 1;
        setState({ ...state });
        dispatch({
            type: "ADD_NUM",
            value: state.testNum,
        })
    }

    let offerValue = (val) => {
        let str = '';
        try {
            str = val.join(' / ');
        } catch (error) {
            // 
        }
        handleDateStr(str)
        handleDate()
    }

    let handleDate = (n) => {
        if (n == 1) {
            handleCalendar(true)
        } else {
            handleCalendar(false)
        }
    }



    let winningList = [{
        digit: '0356',
        prizeName: '华为p50 pro',
        prizeLevel: 1
    }, {
        digit: '0564',
        prizeName: '洗衣液一瓶'
    }, {
        digit: '3256',
        prizeName: '美的电饭锅'
    }, {
        digit: '2352',
        prizeName: '六神花露水'
    }, {
        digit: '8404',
        prizeName: '50电话费'
    }, {
        digit: '2578',
        prizeName: '伊利牛奶'
    }, {
        digit: '2452',
        prizeName: '红富士苹果一箱'
    }, {
        digit: '2245',
        prizeName: '香飘飘奶茶'
    }];
    let firstWinning = null;
    let firtItem = winningList[0] || null;
    try {
        if (firtItem.prizeLevel == 1 || firtItem.prizeLevel == 2) {
            firstWinning = firtItem;
        }
    } catch (error) {
        // 
    }

    return (
        <div className="page-home">
            <h3>page home</h3>

            <div className="box">
                <div className="btn" onClick={() => reduce()}><span>-</span></div>
                <p>radux val {state.testNum}</p>
                <div className="btn" onClick={() => add()}><span>+</span></div>
            </div>

            <div className='select-date' onClick={() => handleDate(1)}>
                <span>请选择日期：</span>
                <b>{dateStr}</b>
            </div>

            {showCalendar && (<Calendar model={2} past={12} future={24} offerValue={offerValue} />) || ''}



            {/* 中奖名单 */}
            <div className="trophy" style={{ margin: "30px 0 0 0" }}>
                {firstWinning && (<p style={{ color: "#FD4C49" }}>【恭喜】尾号{firstWinning.digit}用户，获得{firstWinning.prizeName}</p>) || ""}
                {winningList.length > 1 ? (<CarouselTxt dataList={winningList} />) : ""}
            </div>


            {/* Notice */}
            <div style={{ margin: "30px 0" }}>
                <Notice data={[{ content: '今天星期五，明天不上班，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈！' }]} />
            </div>



        </div>
    )
}
